iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
Modern Web

Déjà-vu ? 要 Vue 過才知道系列 第 29

Vue Slot 的插槽基本用法

  • 分享至 

  • xImage
  •  

腦子就像手機充電一樣,充太飽也不會讓手機變快,充不夠就後繼無力。

今天要介紹的是據說及將會在 Vue3 消失的slot,突然覺得寫這篇的意義是什麼!?但是,有那麼多的專案都是以 Vue2 開發出來,也有可能會遇到要維護用 Vue2 寫的專案,所以還是有瞭解的必要。

component slot 的功能

父元件向子元件傳遞「模版的內容」,之前也有提到如何讓父元件向子元件傳遞「資料」,但 Slot 是針對「模版內容」的傳遞。
https://ithelp.ithome.com.tw/upload/images/20201015/20104175bIFpcTaw8x.png
這一樣圖我們可以看到有三個父元件的模版標籤,且模版標籤裡都有文字內容,在這之前我們遇到很多時後是模版標籤裡是沒有內容的,例如<item-text></item-text>,而如果這些模版標籤理有內容,就必須透過<slot>傳遞過去。<slot>也代表我們預留一塊空的插槽空間在子元件,來放置父元件來的內容。

Slot 的使用位置

<slot>通常使用在子元件的模版中,語法如下:

Vue.component('item-text', {
  template: `
    <div>
      <strong>Say :</strong>
      <slot></slot>
    </div>
  `,
});

<slot>插槽的內容則是<item-text> Hello ! </item-text>

我們來看一下實作可能會比較清楚 Vue_Base_Slot

我們的目的是要讓子元件裡<slot>的位置可以包含我們在父元件裡標籤模裡<item-text>裡的文字內容,在父元件的 HTML 的 #app 裡,子元件的模版標籤<item-text></item-text>之間插入<slot>預留位置,回到父元件裡的<item-text>標籤內填入我們希望出現的文字內容就可以了。

<div id="app">
  <item-text>Hello !</item-text>
  <item-text>Bonjour !</item-text>
</div>
<script>
// 子元件
Vue.component('item-text', {
  template: `
    <div>
      <strong>Say :</strong>
      <slot></slot>
    </div>
  `,
});
// 父元件
new Vue({
  el:'#app',
  data:{

  }
})
</script>>

這樣出現的結果就會是:
Say : Hello !
Say : Bonjour !

需要注意的是在子元件模版中的<slot></slot>之間通常是空白的,如果在標籤之間加上內容,也就表示如果在父元件裡的模版標籤沒有內容,那麼就會顯示我們在子元件中<slot>之間放的文字內容。如果父元件的模版標籤李有文字內容,那麼原本的內容則會被覆蓋掉。

鐵人賽剩兩天了,賽事結束並不表示學完了,只是表示我們爬上了一個小山丘,或是到達了登山口,接下來還有美麗與嚴峻的風景等著我們!

每日一句法文有益身心:Tu es adorable ! ! --> 舉.A.阿兜哈伯勒! --> 你真討人喜歡 !你好可愛 !!


上一篇
Vue Components 子元件之間的資料傳遞
下一篇
其實,我還在這裡,但不會一直在這裡。
系列文
Déjà-vu ? 要 Vue 過才知道30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言